<template>
  <div class="app-container">
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 首页推荐卡片 -->
      <div v-if="showHomeView" class="home-view">
        <div class="home-header">
          <h2 class="cards-title">{{ t('i_want_to_know_more') }}</h2>
          <p class="cards-subtitle">{{ t('choose_the_service_you_are_interested_in') }}</p>
        </div>

        <!-- 免费次数提示 -->
        <div class="free-times-notice">
          <svg class="notice-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
            <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
          </svg>
          <span class="notice-text">{{ t('free_times_notice') || '每天2次免费' }}</span>
        </div>

        <!-- 卡片分组显示 -->
        <div v-for="(group, groupIndex) in cardGroups" :key="'group-'+groupIndex" class="card-group">
          <h3 class="group-title">
            <img :src="titleIcon" alt="" class="title-icon" />
            {{ t(group.title) }}
          </h3>
          
          <!-- 平铺卡片容器 - 根据组类型选择不同的展示方式 -->
          <!-- 普通卡片组 -->
          <div v-if="!group.hasChildren" class="cards-grid">
            <div 
              v-for="(card, index) in group.cards" 
              :key="index" 
              class="card-item" 
              @click="handleCardClick(card)"
            >
              <!-- 问号图标 -->
              <div class="help-icon" @click.stop="showCardModal(card)">
                <span>?</span>
              </div>
              <div class="card-icon">
                <span v-if="getCardIcon(card.title)">{{ getCardIcon(card.title) }}</span>
                <span v-else>📋</span>
              </div>
              <div class="card-content">
                <div class="card-title">{{ t(card.title) }}</div>
                <div class="card-description">{{ t(card.description) }}</div>
              </div>
            </div>
          </div>
            
          <!-- 团体用户体验卡片 -->
          <div v-else class="team-cards-grid">
            <div 
              v-for="(childCard, cIndex) in getAllTeamChildren(group.parentCards)" 
              :key="'team-child-'+cIndex" 
              class="card-item" 
              @click="handleCardClick(childCard)"
            >
              <!-- 问号图标 -->
              <div class="help-icon" @click.stop="showCardModal(childCard)">
                <span>?</span>
              </div>
              <div class="card-icon">
                <span>{{ getCardIcon(childCard.title) }}</span>
              </div>
              <div class="card-content">
                <div class="card-title">{{ t(childCard.title) }}</div>
                <div class="card-description">{{ t(childCard.description) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    
    <!-- 导航确认弹窗 -->
    <div v-if="showNavigateModal" class="navigate-modal-overlay" @click="cancelNavigation">
      <div class="navigate-modal" @click.stop>
        <div class="modal-header">
          <h3>{{ t('confirm_navigation') || '确认前往' }}</h3>
          <span class="modal-close" @click="cancelNavigation">×</span>
        </div>
        
        <div class="modal-body">
          <!-- 展示图片 -->
          <div class="modal-image" v-if="selectedCard && selectedCard.key">
            <img 
              :src="getCardImage(selectedCard.key)" 
              :alt="t(selectedCard.title)" 
              v-if="getCardImage(selectedCard.key)"
              @click="openImageViewer(getCardImage(selectedCard.key))"
              class="clickable-image"
            />
            <div v-else class="no-image-placeholder">
              <span>{{ getCardIcon(selectedCard.title) }}</span>
            </div>
          </div>
          
          <!-- 卡片信息 -->
          <div class="modal-info" v-if="selectedCard">
            <h4>{{ t(selectedCard.title) }}</h4>
            <p>{{ t(selectedCard.description) }}</p>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="cancel-btn" @click="cancelNavigation">
            {{ t('cancel') || '取消' }}
          </button>
          <button class="confirm-btn" @click="confirmNavigation">
            {{ t('go_to') || '前往' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 图片查看器 -->
    <div v-if="showImageViewer" class="image-viewer-overlay" @click="closeImageViewer">
      <div class="image-viewer-container">
        <img 
          :src="viewerImage" 
          alt="放大查看" 
          class="viewer-image"
          @click.stop
        />
        <button class="image-viewer-close" @click="closeImageViewer">
          <span>×</span>
        </button>
      </div>
    </div>

    <!-- 微信二维码浮动展示 -->
    <div class="wechat-float" v-if="showWechatQr" :class="{ collapsed: !isQrExpanded }">
      <!-- 切换按钮（移动端显示） -->
      <div class="wechat-toggle" @click="toggleQrExpanded">
        <svg v-if="!isQrExpanded" width="20" height="20" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <!-- 二维码内容 -->
      <div class="wechat-inner" v-show="isQrExpanded">
        <div class="wechat-tip">扫码体验</div>
        <img
          :src="wechatQr"
          alt="微信小程序"
          @click="openQrViewer"
          class="wechat-qr-img"
        />
      </div>
    </div>

    <!-- 二维码大图查看器 -->
    <div v-if="showQrViewer" class="qr-viewer-overlay" @click="closeQrViewer">
      <div class="qr-viewer-container">
        <img
          :src="wechatQr"
          alt="微信小程序大图"
          class="qr-viewer-image"
          @click.stop
        />
        <button class="qr-viewer-close" @click="closeQrViewer">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 登录弹窗已移至Sidebar组件 -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useChatStore } from '@/store/chatStore';
import { useLanguageStore } from '@/store/languageStore';
// 加载图片
const modules = import.meta.glob('@/assets/images/slt/*.{png,jpg,jpeg}', { eager: true })
const { t } = useLanguageStore();
// 微信小程序二维码
import wechatQr from '@/assets/images/phone.png';
// 导入标题装饰图标
import titleIcon from '@/assets/svg/bg.svg'; 

// 路由和存储
const router = useRouter();
const chatStore = useChatStore();

// 基本状态
const showHomeView = ref(true);

// 弹窗状态
const showNavigateModal = ref(false);
const selectedCard = ref(null);

// 图片放大查看状态
const showImageViewer = ref(false);
const viewerImage = ref('');

// 二维码相关状态
const showWechatQr = ref(true);
const showQrViewer = ref(false);
// 检测是否为移动设备
const isMobile = ref(window.innerWidth <= 768);
const isQrExpanded = ref(!isMobile.value); // 移动端默认折叠，PC端默认展开

// localStorage 键名
const VISITED_CARDS_KEY = 'homepage_visited_cards';

// 从 localStorage 加载已访问的卡片
const loadVisitedCards = () => {
  try {
    const stored = localStorage.getItem(VISITED_CARDS_KEY);
    if (stored && typeof stored === 'string') {
      return new Set(JSON.parse(stored));
    }
  } catch (error) {
    console.error('加载访问记录失败:', error);
  }
  return new Set();
};

// 保存访问记录到 localStorage
const saveVisitedCards = (cards) => {
  try {
    localStorage.setItem(VISITED_CARDS_KEY, JSON.stringify(Array.from(cards)));
  } catch (error) {
    console.error('保存访问记录失败:', error);
  }
};

// 记录已访问过的卡片
const visitedCards = ref(loadVisitedCards());

// 清除访问记录（用于开发调试）
const clearVisitedCards = () => {
  visitedCards.value.clear();
  localStorage.removeItem(VISITED_CARDS_KEY);
  console.log('已清除所有卡片访问记录');
};

// 将清除函数暴露到window对象（仅开发环境）
if (process.env.NODE_ENV === 'development') {
  window.clearVisitedCards = clearVisitedCards;
}

// 用户状态相关 - 使用 Pinia 存储


// 聊天相关 - 使用 Pinia 存储
const chatHistory = computed(() => chatStore.getChatHistory);

// 问题提示
const questionTips = ref([]);
const currentQuestionTip = ref('');

// 获取问题提示
const fetchQuestionTips = async () => {
  try {
    // 模拟数据
    questionTips.value = [
      '您可以询问关于健康、事业、情感等方面的问题',
      '尝试描述您的症状，我们可以提供初步的健康建议',
      '您可以询问如何改善睡眠质量或缓解压力',
      '有任何生活困惑都可以向我咨询'
    ];
    currentQuestionTip.value = questionTips.value[0];
  } catch (error) {
    console.error('获取问题提示失败:', error);
    // 设置默认提示
    questionTips.value = ['有任何问题都可以向我咨询'];
    currentQuestionTip.value = questionTips.value[0];
  }
};
// 卡片分组数据
const cardGroups = ref([]);

// 获取卡片图标
const getCardIcon = (title) => {
  const iconMap = {
    'health_evaluation': '🏥',
    'body_type_query': '📊',
    'symptom_query': '🌿',
    'group_experience': '👥',
    'personal_experience': '👤',
    'project_prediction': '📈',
    'work_career': '💼',
    'emotional_consultation': '💕',
    'publicity_audit': '🔍',
    'chinese_medicine_diagnosis': '🏥',
    'academic_education': '🎓',
    'internal_publicity': '🏢',
    'bidding_publicity': '🏆',
    'crisis_publicity': '⚠️',
    'industry_development': '📊',
    'strategic_deployment': '🔄',
    'assessment_project': '📝',
    'personnel_architecture': '👥'
  };
  
  return iconMap[title] || '📋';
};

// 根据卡片key获取对应的图片
const getCardImage = (key) => {
  if (!key || !modules) return null;
  
  // 在modules中查找匹配的图片
  for (const path in modules) {
    // 从路径中提取文件名（不包含扩展名）
    const fileName = path.split('/').pop().split('.')[0];
    if (fileName === key) {
      return modules[path].default || modules[path];
    }
  }
  return null;
};

// 获取卡片数据
const fetchCards = async () => {
  try {
    // 热门卡片
    const hotCards = [
      { 
        title: 'health_evaluation', 
        description: 'headlth_text',
        route: '/health',
        key: 'jkpc'
      },
      { 
        title: 'body_type_query', 
        description: 'body_type_text',
        route: '/constitution',
        key: 'tzcx'
      },
      { 
        title: 'symptom_query', 
        description: 'symptom_text',
        route: '/symptom',
        key: 'zzcx'
      }
    ];
    
    // 团体用户卡片
    const groupCards = [
      {
        id: 1,
        title: 'publicity_maintenance',
        description: 'publicity_maintenance_text',
        children: [
          {
            id: 1,
            title: 'internal_publicity',
            description: 'internal_publicity_text',
            route: '/health',
            params: { categoryId: 11 },
            key: 'nbgg'
          },
          {
            id: 2,
            title: 'bidding_publicity',
            description: 'bidding_publicity_text',
            route: '/health',
            params: { categoryId: 12 },
            key: 'jbgg'
          },
          {
            id: 3,
            title: 'crisis_publicity',
            description: 'crisis_publicity_text',
            route: '/health',
            params: { categoryId: 13 },
            key: 'wjgg'
          },
          {
            id: 4,
            title: 'publicity_audit',
            description: 'publicity_audit_text',
            route: '/health',
            params: { categoryId: 18 },
            key: 'ggsh'
          }
        ]
      },
      {
        id: 2,
        title: 'strategic_deployment',
        description: 'strategic_deployment_text',
        children: [
          {
            id: 1,
            title: 'industry_development',
            description: '企业行业发展服务',
            route: '/health',
            params: { categoryId: 14 },
            key: 'hyfz'
          },
          {
            id: 2,
            title: 'strategic_deployment',
            description: 'strategic_deployment_text',
            route: '/health',
            params: { categoryId: 15 },
            key: 'zlbs'
          },
          {
            id: 3,
            title: 'assessment_project',
            description: 'assessment_project_text',
            route: '/health',
            params: { categoryId: 16 },
            key:'pgxm'
          },
          {
            id: 4,
            title: 'personnel_architecture',
            description: 'personnel_architecture_text',
            route: '/health',
            params: { categoryId: 17 },
            key:'ryjg'
          },
        ]
      }
    ];
    
    // 个人用户卡片
    const personalCards = [
      {
        id: 1,
        title: 'project_prediction',
        description: 'project_prediction_text',
        route: '/health',
        params: { categoryId: 7 },
        key:'xmyc'
      },
      {
        id: 2,
        title: 'work_career',
        description: 'work_career_text',
        route: '/health',
        params: { categoryId: 8 },
        key:'gzsy'
      },
      {
        id: 3,
        title: 'emotional_consultation',
        description: 'emotional_consultation_text',  
        route: '/health',
        params: { categoryId: 9 },
        key:'qgzx'
      },
      {
        id: 4,
        title: 'publicity_audit',
        description: 'publicity_audit_text',
        route: '/health',
        params: { categoryId: 10 },
        key:'ggsh'
      },
      {
        id: 5,
        title: 'chinese_medicine_diagnosis',
        description: 'chinese_medicine_diagnosis_text',
        route: '/health',
        params: { categoryId: 19 },
        key:'jkpc'
      },
      {
        id: 6,
        title: 'academic_education',
        description: 'academic_education_text',
        route: '/health',
        params: { categoryId: 20 },
        key:'xyky'
      }
    ];
    
    // 设置卡片分组
    cardGroups.value = [
      {
        title: 'popular',
        cards: hotCards,
        hasChildren: false,
      },
      {
        title: 'group_experience',
        cards: [],
        hasChildren: true,
        parentCards: groupCards
      },
      {
        title: 'personal_experience',
        cards: personalCards,
        hasChildren: false
      }
    ];
    
  } catch (error) {
    console.error('获取卡片数据失败:', error);
    // 设置默认卡片组
    cardGroups.value = [
      {
        title: '推荐',
        cards: [{ 
          title: '新建对话', 
          description: '开始一个新的对话',
          mode: 'chat'
        }],
        hasChildren: false
      }
    ];
  }
};

// 获取所有团队卡片的子项
const getAllTeamChildren = (parentCards) => {
  let allChildren = [];
  parentCards.forEach(parentCard => {
    if (parentCard.children && parentCard.children.length > 0) {
      allChildren = [...allChildren, ...parentCard.children];
    }
  });
  return allChildren;
};

// 处理卡片点击
const handleCardClick = (card) => {
  const cardKey = card.key || card.title;
  
  // 检查是否首次点击
  if (!visitedCards.value.has(cardKey)) {
    // 首次点击，显示弹窗
    showCardModal(card);
    // 标记为已访问
    visitedCards.value.add(cardKey);
    // 保存到 localStorage
    saveVisitedCards(visitedCards.value);
  } else {
    // 非首次点击，直接跳转
    directNavigate(card);
  }
};

// 显示卡片弹窗
const showCardModal = (card) => {
  console.log('选中卡片:', card);
  console.log('卡片key:', card.key);
  console.log('可用的图片模块:', modules);
  console.log('获取到的图片:', getCardImage(card.key));
  
  selectedCard.value = card;
  showNavigateModal.value = true;
};

// 直接跳转
const directNavigate = (card) => {
  if (card) {
    const route = card.route;
    const params = card.params || {};
    
    router.push({
      path: route,
      query: params
    });
  }
};

// 确认前往
const confirmNavigation = () => {
  if (selectedCard.value) {
    const cardKey = selectedCard.value.key || selectedCard.value.title;
    
    // 确认前往时也要标记为已访问
    if (!visitedCards.value.has(cardKey)) {
      visitedCards.value.add(cardKey);
      saveVisitedCards(visitedCards.value);
    }
    
    const route = selectedCard.value.route;
    const params = selectedCard.value.params || {};
    
    router.push({
      path: route,
      query: params
    });
  }
  closeNavigateModal();
};

// 取消导航
const cancelNavigation = () => {
  closeNavigateModal();
};

// 关闭弹窗
const closeNavigateModal = () => {
  showNavigateModal.value = false;
  selectedCard.value = null;
};

// 打开图片查看器
const openImageViewer = (imageSrc) => {
  viewerImage.value = imageSrc;
  showImageViewer.value = true;
};

// 关闭图片查看器
const closeImageViewer = () => {
  showImageViewer.value = false;
  viewerImage.value = '';
};

// 打开二维码大图查看
const openQrViewer = () => {
  showQrViewer.value = true;
};

// 关闭二维码大图查看
const closeQrViewer = () => {
  showQrViewer.value = false;
};

// 切换移动端二维码展开/折叠
const toggleQrExpanded = () => {
  isQrExpanded.value = !isQrExpanded.value;
};


// 监听窗口大小变化
const handleResize = () => {
  const wasMobile = isMobile.value;
  isMobile.value = window.innerWidth <= 768;

  // 当从PC切换到移动端时，自动折叠
  if (!wasMobile && isMobile.value) {
    isQrExpanded.value = false;
  }
  // 当从移动端切换到PC时，自动展开
  else if (wasMobile && !isMobile.value) {
    isQrExpanded.value = true;
  }
};

// 初始化
onMounted(async () => {
  // 添加窗口大小监听
  window.addEventListener('resize', handleResize);
  // 获取数据
  await Promise.all([
    fetchQuestionTips(),
    fetchCards()
  ]);
  
  // 不再合并额外卡片数据
  // if (cards.value.length > 0) {
  //   cards.value = [...cards.value, ...additionalCards];
  // }
  
  // 设置问题提示定时器
  setInterval(() => {
    if (questionTips.value.length > 0) {
      const randomIndex = Math.floor(Math.random() * questionTips.value.length);
      currentQuestionTip.value = questionTips.value[randomIndex];
    }
  }, 8000);
  
  // 如果存储中有聊天历史，加载最近的聊天
  if (chatHistory.value.length > 0) {
    chatStore.setCurrentChat(0);
  }
});

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});







</script>

<style lang="less" scoped>
@import "@/assets/styles/variables.less";
@import "@/assets/styles/temp-variables.less";

.app-container {
  display: flex;
  overflow: hidden;
  color: #333333;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 左侧边栏样式 */
.sidebar {
  width: 280px;
  background-color: #3f51b5;
  border-right: 1px solid #3f51b5;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.app-logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
  padding: 20px;
  border-bottom: 1px solid #3f51b5;
}

.logo-icon {
  font-size: 24px;
  margin-right: 8px;
  color: #ffffff;
}

.logo-text {
  font-weight: 600;
  color: #ffffff;
}

.sidebar-actions {
  padding: 16px;
}

.new-chat-btn {
  background-color: #5c6bc0;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  font-size: 15px;
}

.new-chat-btn:hover {
  background-color: #4f5a80;
}

.btn-icon {
  font-size: 18px;
  margin-right: 8px;
  color: #ffffff;
}

.sidebar-nav {
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-icon {
  font-size: 18px;
  margin-right: 12px;
  opacity: 0.8;
  color: #ffffff;
}

.user-section {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid #3f51b5;
}

.user-credits {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.credits-icon {
  margin-right: 8px;
  color: #ffffff;
}

.premium-badge {
  display: flex;
  align-items: center;
  background-color: #f59f00;
  color: #000;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 13px;
}

.premium-icon {
  margin-right: 4px;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.username {
  font-weight: 500;
  color: #ffffff;
}

.logout-btn {
  background-color: transparent;
  border: 1px solid #e0e0e0;
  color: #e0e0e0;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.login-btn, .recharge-btn {
  background-color: @primary-color;
  color: white;
  border: none;
  border-radius: @border-radius-sm;
  padding: 8px;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  
  &:hover {
    background-color: darken(@primary-color, 10%);
  }
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部导航栏 */
.main-header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-btn {
  background-color: transparent;
  border: none;
  color: @primary-color;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 12px;
  
  &:hover {
    color: #5c6bc0;
    transform: translateX(-2px);
  }
}

.back-icon {
  margin-right: 4px;
}

.current-chat-title {
  font-size: 18px;
  font-weight: 500;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

/* 首页卡片样式 */
.home-view {
  flex: 1;
  padding: 32px;
}

.home-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0 20px;
  background: linear-gradient(135deg, rgba(74, 92, 219, 0.05) 0%, rgba(121, 134, 203, 0.1) 100%);
  border-radius: 16px;
  margin: 0 auto 40px;
  max-width: 800px;
}

.cards-title {
  text-align: center;
  margin-bottom: 12px;
  color: #4a5cdb;
  font-weight: 600;
  font-size: 28px;
}

.cards-subtitle {
  text-align: center;
  color: #666;
  font-size: 16px;
  margin-bottom: 0;
}

/* 免费次数提示样式 */
.free-times-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  margin: 24px auto;
  max-width: 400px;
  background: linear-gradient(135deg, #e3f2fd 0%, #e8eaf6 100%);
  border: 1px solid #90caf9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(63, 81, 181, 0.1);
  transition: all 0.3s ease;
}

.free-times-notice:hover {
  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.15);
  transform: translateY(-2px);
}

.notice-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: #3f51b5;
  flex-shrink: 0;
}

.notice-text {
  font-size: 15px;
  font-weight: 500;
  color: #3f51b5;
  letter-spacing: 0.5px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.team-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.team-cards-grid .card-item {
  width: 100%;
  min-width: 220px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 移动端适配样式 */
@media screen and (max-width: 992px) {
  .team-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 普通卡片在平板端显示两列 */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  /* 移动端普通卡片显示两列 */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 16px;
  }

  .card-item {
    min-height: 160px;
  }

  /* 移动端免费次数提示 */
  .free-times-notice {
    padding: 10px 16px;
    margin: 16px auto;
    max-width: calc(100% - 32px);
  }

  .notice-icon {
    width: 18px;
    height: 18px;
  }

  .notice-text {
    font-size: 14px;
  }
  
  .help-icon {
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    
    span {
      font-size: 12px;
    }
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin: 16px auto 8px;
  }
  
  .card-content {
    padding: 0 16px 16px;
  }
  
  .card-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .card-description {
    font-size: 12px;
    margin-bottom: 16px;
  }
  
  .home-view {
    padding: 20px 16px;
  }
  
  .home-header {
    padding: 24px 0 16px;
    margin-bottom: 24px;
  }
  
  .cards-title {
    font-size: 22px;
  }
  
  .cards-subtitle {
    font-size: 14px;
  }
  
  .group-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .title-icon {
    width: 24px;
    height: 24px;
  }
}

@media screen and (max-width: 576px) {
  .team-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .team-cards-grid .card-item {
    min-width: 100%;
    margin-bottom: 15px;
  }
}

.card-group {
  margin-bottom: 40px;
}

.group-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #3f51b5;
  color: #333;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.card-item {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 10px 25px rgba(63, 81, 181, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 180px;
}

/* 问号图标样式 */
.help-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(63, 81, 181, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  
  span {
    color: #3f51b5;
    font-size: 14px;
    font-weight: 600;
  }
  
  &:hover {
    background-color: #3f51b5;
    transform: scale(1.1);
    
    span {
      color: white;
    }
  }
}

/* 团体用户体验横向布局 */
.team-experience-container {
  margin-top: 10px;
  width: 100%;
}

.team-cards-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.team-card {
  flex: 1;
  min-width: 300px;
  background-color: rgba(248, 249, 255, 0.8);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(74, 92, 219, 0.1);
}

.team-card-header {
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(63, 81, 181, 0.1);
}

.team-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #3f51b5;
  margin-bottom: 6px;
}

.team-card-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 0;
}

.team-children-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.team-child-card {
  flex: 0 0 calc(50% - 6px);
  background-color: white;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.team-child-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(63, 81, 181, 0.1);
}

.team-child-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(63, 81, 181, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.team-child-card:hover .team-child-icon {
  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
  color: white;
}

.team-child-content {
  flex: 1;
}

.team-child-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(74, 92, 219, 0.15);
  background-color: #f8f9ff;
}

.card-item:hover .card-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
  color: white;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(63, 81, 181, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 24px auto 10px;
  transition: all 0.3s ease;
}

.card-content {
  padding: 0 24px 24px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #3f51b5;
}

.card-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background-color: @background-color;
}

/* 健康咨询视图样式 */
.health-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.health-container {
  flex: 1;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.health-section-title {
  text-align: center;
  margin-bottom: 20px;
  color: #3f51b5;
  font-weight: 500;
}

.health-category {
  margin-bottom: 30px;
}

.health-category-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s;
}

.health-category-selector:hover {
  border-color: #3f51b5;
}

.selector-icon {
  color: #909399;
}

.health-form {
  margin-bottom: 30px;
}

.health-form-item {
  margin-bottom: 20px;
}

.health-form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.health-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: all 0.3s;
}

.health-input:focus {
  outline: none;
  border-color: #3f51b5;
}

.health-upload {
  margin-bottom: 30px;
}

.upload-area {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.uploaded-image {
  width: 120px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.uploaded-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

.upload-button {
  width: 120px;
  height: 120px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-button:hover {
  border-color: #3f51b5;
  color: #3f51b5;
}

.upload-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.health-submit {
  text-align: center;
}

.submit-button {
  padding: 12px 24px;
  background-color: #4a5cdb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.submit-button:hover {
  background: linear-gradient(to right, #303f9f, #3f51b5);
  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.4);
  transform: translateY(-2px);
}

.submit-button:disabled {
  background: linear-gradient(to right, #9fa8da, #c5cae9);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 健康咨询弹窗样式 */
.health-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.health-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.health-popup-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.health-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.health-popup-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.health-popup-close {
  font-size: 22px;
  color: #909399;
  cursor: pointer;
}

.health-popup-body {
  max-height: 400px;
  overflow-y: auto;
}

.health-popup-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #ebeef5;
}

.health-popup-item:hover {
  background-color: #f5f7fa;
}

.health-popup-item:last-child {
  border-bottom: none;
}

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
  
  /* 欢迎消息样式 */
  .chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
    text-align: center;
    
    .welcome-title {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 16px;
      color: @text-color;
    }
    
    .welcome-subtitle {
      font-size: 16px;
      color: #999;
      max-width: 600px;
      line-height: 1.5;
    }
  }
}

.chat-messages {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.message-wrapper {
  display: flex;
  margin-bottom: 28px;
  animation: fadeIn 0.3s ease;
  width: 100%;
  
  &:last-child {
    margin-bottom: 16px;
  }
}

.message-wrapper.user {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
  margin: 0 12px;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #7986cb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.message-wrapper.user .avatar-img {
  background-color: #4a5cdb;
}

.message-bubble {
  max-width: 75%;
}

.message-content {
  background-color: @input-bg;
  padding: 16px 20px;
  border-radius: 16px 16px 16px 0;
  line-height: 1.6;
  word-break: break-word;
  font-size: 15px;
}

.message-wrapper.user .message-content {
  background-color: #4a5cdb;
  color: white;
  border-radius: 16px 16px 0 16px;
}

.question-tip-wrapper {
  padding: 0 24px;
  margin-bottom: 16px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.question-tip {
  background-color: rgba(77, 171, 247, 0.1);
  border: 1px solid rgba(77, 171, 247, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.tip-icon {
  font-size: 18px;
  color: #4dabf7;
  flex-shrink: 0;
  margin-right: 12px;
}

.tip-content {
  flex: 1;
}

.close-tip {
  cursor: pointer;
  font-size: 18px;
  margin-left: 12px;
}

.chat-input-container {
  padding: 20px;
  border-top: 1px solid @border-color;
  background-color: @input-bg;
}

.input-wrapper {
  display: flex;
  position: relative;
  border: 1px solid @border-color;
  border-radius: 8px;
  background-color: lighten(@input-bg, 5%);
  transition: border-color 0.2s;
  overflow: hidden;
  
  &:focus-within {
    border-color: @primary-color;
  }
  
  /* 输入框工具栏 */
  .input-tools {
    display: flex;
    align-items: center;
    padding: 0 10px;
    
    .tool-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 5px;
      cursor: pointer;
      color: #999;
      transition: color 0.2s;
      
      &:hover {
        color: @primary-color;
      }
    }
  }
  
  /* 输入框右侧操作区 */
  .input-actions {
    display: flex;
    align-items: flex-end;
    padding: 10px;
  }
}

.chat-input {
  flex: 1;
  min-height: 24px;
  max-height: 120px; /* 大约五行文字的高度 */
  padding: 16px;
  border: none;
  background-color: transparent;
  color: @text-color;
  font-size: 16px;
  resize: none;
  outline: none;
  overflow-y: auto;
  line-height: 1.5;
  transition: height 0.1s ease;
}

.send-btn {
  width: 32px;
  height: 32px;
  background-color: @primary-color;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
  
  &:hover:not(:disabled) {
    background-color: darken(@primary-color, 10%);
  }
  
  &:disabled {
    background-color: #555;
    cursor: not-allowed;
  }
  
  &.loading {
    background-color: @primary-color;
  }
}

.send-icon {
  font-size: 18px;
}

.loading-icon {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 快捷功能区样式 */
.quick-tools {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  gap: 10px;
}

.quick-tool-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: lighten(@input-bg, 5%);
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: lighten(@input-bg, 10%);
  }
  
  .quick-tool-icon {
    margin-right: 6px;
  }
}
/* 体质查询样式 */
.constitution-view {
  padding: 20px;
  overflow-y: auto;
}

.constitution-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.constitution-section-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #3f51b5;
  font-weight: 500;
}

.constitution-form {
  margin-bottom: 20px;
}

.constitution-form-item {
  margin-bottom: 15px;
}

.constitution-form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.constitution-date-picker,
.constitution-select {
  width: 100%;
}

.constitution-result {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f7ff;
  border-radius: 8px;
  border-left: 4px solid #3f51b5;
  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.15);
}

.result-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #3f51b5;
  border-bottom: 1px solid #c5cae9;
  padding-bottom: 8px;
}

.result-content {
  white-space: pre-line;
  line-height: 1.8;
  color: #333333;
  font-size: 15px;
}

/* 为不同类型的内容添加样式 */
.result-content strong,
.result-content b {
  color: #3f51b5;
  font-weight: 600;
}

/* 为标题部分添加样式 */
/* 为标题和关键内容添加样式 */
.result-content strong,
.result-content b {
  color: #5c6bc0;
  font-weight: 600;
}

/* 为标题文字添加样式 */
.result-content-title {
  color: #3f51b5;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
}

.constitution-submit {
  margin-top: 20px;
  text-align: center;
}

.constitution-submit .submit-button {
  padding: 10px 30px;
  background: linear-gradient(to right, #3f51b5, #5c6bc0);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(63, 81, 181, 0.3);
}

.constitution-submit .submit-button:hover {
  background: linear-gradient(to right, #303f9f, #3f51b5);
  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.4);
  transform: translateY(-2px);
}

.constitution-submit .submit-button:disabled {
  background: linear-gradient(to right, #9fa8da, #c5cae9);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 导航确认弹窗样式 */
.navigate-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.navigate-modal {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f8f9ff;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #3f51b5;
}

.modal-close {
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #f56c6c;
}

.modal-body {
  padding: 24px;
}

.modal-image {
  text-align: center;
  margin-bottom: 20px;
}

.modal-image img {
  max-width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.clickable-image {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.clickable-image:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.no-image-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #f5f7ff 0%, #e8eaf6 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.no-image-placeholder span {
  font-size: 48px;
  opacity: 0.6;
}

.modal-info {
  text-align: center;
}

.modal-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: #3f51b5;
  margin: 0 0 8px 0;
}

.modal-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid #ebeef5;
  background-color: #f8f9ff;
}

.cancel-btn,
.confirm-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.cancel-btn {
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.cancel-btn:hover {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
  color: #409eff;
}

.confirm-btn {
  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #303f9f 0%, #3f51b5 100%);
  box-shadow: 0 6px 16px rgba(63, 81, 181, 0.4);
  transform: translateY(-2px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .navigate-modal {
    width: 95%;
    margin: 0 20px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px 20px;
  }
  
  .modal-image img {
    height: 150px;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .cancel-btn,
  .confirm-btn {
    width: 100%;
  }
}

/* 图片查看器样式 */
.image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
  cursor: pointer;
}

.image-viewer-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1);
  cursor: default;
  animation: modalSlideIn 0.3s ease;
}

.image-viewer-close {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.image-viewer-close:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 移动端图片查看器适配 */
@media screen and (max-width: 768px) {
  .image-viewer-container {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .image-viewer-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* 微信二维码浮动样式 */
.wechat-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  animation: fadeInUp 0.5s ease;
  transition: all 0.3s ease;
}

/* 切换按钮（默认隐藏，移动端显示） */
.wechat-toggle {
  display: none;
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 60px;
  background: linear-gradient(135deg, rgba(63, 81, 181, 0.9) 0%, rgba(92, 107, 192, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-radius: 20px 0 0 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
}

.wechat-toggle svg {
  width: 20px;
  height: 20px;
}

.wechat-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

/* 折叠状态 */
.wechat-float.collapsed {
  transform: translateX(calc(100% + 5px));
}

.wechat-float.collapsed .wechat-toggle {
  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
  box-shadow: -3px 0 15px rgba(63, 81, 181, 0.3);
}

.wechat-inner {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.wechat-inner:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 40px rgba(63, 81, 181, 0.4);
  border-color: rgba(63, 81, 181, 0.5);
}

.wechat-tip {
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 500;
  opacity: 0.9;
}

.wechat-qr-img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  display: block;
  transition: transform 0.3s ease;
}

.wechat-inner:hover .wechat-qr-img {
  transform: scale(1.02);
}

/* 二维码大图查看器 */
.qr-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  animation: fadeIn 0.3s ease;
  cursor: pointer;
}

.qr-viewer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalSlideIn 0.3s ease;
}

.qr-viewer-image {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
  cursor: default;
  background: white;
  padding: 10px;
}

.qr-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 8px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qr-viewer-close:hover {
  background-color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.qr-viewer-close:active {
  transform: scale(0.95);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .wechat-float {
    bottom: 20px;
    right: 0; /* 调整为贴边 */
  }

  /* 显示切换按钮 */
  .wechat-toggle {
    display: flex;
    height: 50px;
    width: 30px;
    left: -30px;
    border-radius: 15px 0 0 15px;
  }

  /* 折叠状态时完全隐藏到右侧 */
  .wechat-float.collapsed {
    transform: translateX(calc(100% + 5px));
  }

  .wechat-float.collapsed .wechat-toggle {
    left: -30px;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% {
      box-shadow: -3px 0 15px rgba(63, 81, 181, 0.3);
    }
    50% {
      box-shadow: -3px 0 25px rgba(63, 81, 181, 0.5);
    }
  }

  .wechat-inner {
    padding: 10px;
    border-radius: 12px 0 0 12px; /* 调整圆角 */
  }

  .wechat-tip {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .wechat-qr-img {
    width: 120px;
    height: 120px;
  }

  .qr-viewer-image {
    width: 250px;
    height: 250px;
  }

  .qr-viewer-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }
}

/* 超小屏幕适配 */
@media screen and (max-width: 480px) {
  .wechat-float {
    bottom: 15px;
    right: 0;
  }

  .wechat-inner {
    padding: 8px;
    border-radius: 10px 0 0 10px;
  }

  .wechat-toggle {
    width: 28px;
    height: 45px;
    left: -28px;
    border-radius: 12px 0 0 12px;
  }

  .wechat-toggle svg {
    width: 16px;
    height: 16px;
  }

  .wechat-float.collapsed .wechat-toggle {
    left: -28px;
  }

  .wechat-qr-img {
    width: 100px;
    height: 100px;
  }

  .qr-viewer-image {
    width: 200px;
    height: 200px;
  }
}
</style>
